import { Button } from '@/components/ui/button'
import { cn } from "@/lib/utils"
import { ChevronRight, X } from 'lucide-react'
import React from 'react'
import ReactMarkdown from 'react-markdown'

interface MaterialLibraryProps {
  state: string
  onStateChange: (state: string) => void
}

const MaterialLibrary: React.FC<MaterialLibraryProps> = ({ state, onStateChange }) => {
  return (
    <div
      className={cn(
        "fixed top-16 right-0 h-[calc(100vh-4rem)] bg-background border-l transition-all duration-300 ease-in-out overflow-hidden",
        state === 'closed' ? 'w-0' : 'w-96'
      )}
    >
      <div className="flex items-center justify-between p-4 border-b">
        <h2 className="text-lg font-semibold whitespace-nowrap">素材库</h2>
        <Button variant="ghost" size="icon" onClick={() => onStateChange(state === 'closed' ? 'open' : 'closed')}>
          {state === 'closed' ? <ChevronRight className="h-4 w-4" /> : <X className="h-4 w-4" />}
        </Button>
      </div>
      <div className="p-4 overflow-auto h-[calc(100%-4rem)] relative">
        <ReactMarkdown>
          {`# 素材库内容

这里是素材库的Markdown内容。

## 图片资源

- 公司logo
- 产品图片
- 员工照片

## 视频资源

1. 公司宣传片
2. 产品演示视频
3. 员工培训视频

### 文档模板

- 报告模板
- 演示文稿模板
- 新闻稿模板`}
        </ReactMarkdown>
      </div>
    </div>
  )
}

export default MaterialLibrary